<template>
  <div class="login-account">
    <el-form label-width="70px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号" prop="login_account">
        <el-input v-model="account.login_account" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password />
      </el-form-item>
      <el-form-item class="captcha" label="验证码" prop="captcha">
        <el-input v-model="account.captcha" />
        <el-image :src="src" @click="resetCaptcha" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import { rules } from '../config/acount-config'
import { ElForm } from 'element-plus'
import localCache from '@/utils/cache'
const store = useStore()

const account = reactive({
  login_account: localCache.getCache('name') ?? '',
  password: localCache.getCache('password') ?? '',
  captcha: '',
  isBack: true
})

const src = ref(`http://localhost:8888/code`)

const resetCaptcha = () => {
  src.value += `?timer=${new Date().getTime()}`
}

const formRef = ref<InstanceType<typeof ElForm>>()
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const loginAction = (isKeepPassword: boolean) => {
  formRef.value?.validate((valid) => {
    if (valid) {
      //存密码
      if (isKeepPassword) {
        localCache.setCache('name', account.login_account)
        localCache.setCache('password', account.password)
      } else {
        localCache.deleteCache('name')
        localCache.deleteCache('password')
      }
      store.dispatch('login/accountLoginAction', { ...account })
    }
  })
}
defineExpose({
  loginAction
})
</script>

<style scoped>
.captcha >>> .el-image__inner {
  width: 120px;
  height: 50px;
}
</style>
